<template>
  <d2-container class="page">
    <div class="page-form">
      <el-form :inline="true" :model="params">
        <el-form-item label="企业名称">
          <el-input v-model="params.name" clearable></el-input>
        </el-form-item>

        <el-form-item label="区域">
          <el-select v-model="params.regionId" style="width: 100%;" clearable>
            <el-option v-for="(item, index) in countryDict"
                       :key="index"
                       :label="item.value"
                       :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryList">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="page-table">
      <el-button type="primary" @click="() => {
        this.visibleAdd = true;
        this.dialogTitle = '新增企业';
        this.currId = '';
        this.currRow = {};
      }">新增</el-button>
      <el-table :data="tableData"
                v-loading="loading"
                row-key="id"
                style="width: 100%">
        <el-table-column prop="id" label="企业号" width="120"></el-table-column>
        <el-table-column prop="name" label="企业名称"></el-table-column>
<!--        <el-table-column prop="showContent" label="企业描述">-->
<!--          <template slot-scope="{ row }">-->
<!--            <el-tooltip popper-class="table-pop" :content="row.showContent" placement="top">-->
<!--              <span class="line-clamp-2">{{ row.showContent }}</span>-->
<!--            </el-tooltip>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column prop="showPicUrl" label="企业宣传照片" width="260">
          <template slot-scope="{ row }">
            <el-image
              style="width: 60px; height: 60px"
              :src="row.showPicUrl"
              fit="cover"
              :preview-src-list="[row.showPicUrl]"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="region" label="网格区域" width="300"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button type="primary" size="small"
                       @click="onInfo({index: scope.$index, row: scope.row})"
            >详情</el-button>
            <el-button type="primary" size="small"
                       @click="onUpdate({index: scope.$index, row: scope.row})"
            >修改</el-button>
            <el-button type="success" size="small"
                       @click="onPerson({index: scope.$index, row: scope.row})"
            >人员采集</el-button>
            <el-button type="danger" size="small"
                       @click="onDelete({index: scope.$index, row: scope.row})"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="params.page"
        :page-size="params.limit"
        layout="prev, pager, next, jumper, sizes"
        :total="total">
      </el-pagination>
    </div>

    <!-- 详情 -->
    <el-dialog
      v-if="infoVisible"
      title="详情"
      :visible.sync="infoVisible"
      :modal-append-to-body="false"
      width="1200px"
      :before-close="() => infoVisible = false">
      <div class="info-content">
        <enterprise-info
          :id="currId"
          :regionList="countryDict"
          :nationList="nationDict"
          :personTypeList="personTypeDict"
        ></enterprise-info>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="infoVisible = false">确定</el-button>
      </span>
    </el-dialog>

    <!-- 新增 -->
    <el-dialog
      v-if="visibleAdd"
      :title="dialogTitle"
      :visible.sync="visibleAdd"
      :modal-append-to-body="false"
      width="800px"
      :before-close="() => visibleAdd = false">
      <div class="info-content">
        <enterprise-add
          ref="add"
          :visible="visibleAdd"
          :row="currRow"
          :regionList="countryDict"
        ></enterprise-add>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visibleAdd = false">取消</el-button>
        <el-button type="primary" @click="onAddSubmit">确定</el-button>
      </span>
    </el-dialog>

    <!-- 人员采集 -->
    <el-dialog
      v-if="visiblePerson"
      title="人员采集"
      :visible.sync="visiblePerson"
      :modal-append-to-body="false"
      width="1600px"
      :before-close="() => visiblePerson = false">
      <div class="info-content">
        <enterprise-persons
          ref="person"
          :id="currId"
          :nationList="nationDict"
          :personTypeList="personTypeDict"
        ></enterprise-persons>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visiblePerson = false">取消</el-button>
        <el-button type="primary" @click="onPersonSubmit">确定</el-button>
      </span>
    </el-dialog>
  </d2-container>
</template>

<script>
import { mapActions } from 'vuex'
import api from '@/api'
import EnterpriseInfo from './info'
import EnterpriseAdd from './add'
import EnterprisePersons from './persons'
import util from '@/libs/util'

export default {
  name: 'enterprise',
  components: {
    EnterpriseInfo,
    EnterpriseAdd,
    EnterprisePersons
  },
  data () {
    return {
      loading: false,
      tableData: [],
      params: {
        name: '',
        regionId: '',
        page: 1,
        limit: 10
      },
      total: 0,
      infoVisible: false,
      currRow: null,
      currId: '',
      nationDict: [],
      countryDict: [],
      personTypeDict: [],
      // add弹出层显示
      visibleAdd: false,
      dialogTitle: '新增企业',
      visiblePerson: false
    }
  },
  mounted () {
    new Promise(async (resolve, reject) => {
      await this.getDictionary('nation')
      await this.getDictionary('country')
      await this.getDictionary('personType')
      await resolve()
    }).then(() => {
      this.queryList()
    })
  },
  methods: {
    ...mapActions('d2admin/pm.dictionary', [
      'dictLoad'
    ]),
    ...mapActions('d2admin/pm.group', [
      'groupList',
      'groupDelete',
      'groupTree'
    ]),
    // 查询列表
    async queryList () {
      this.loading = true
      let {code, page} = await api.PM_ENTERPRISE_LIST(this.params)
      this.loading = false
      if (code === 0) {
        this.total = page.totalCount
        this.tableData = page.list.map(e => {
          return {
            ...e,
            region: util.showDicValue(e.regionId, this.countryDict)
          }
        })
      }
    },
    // 获取字典
    async getDictionary (type) {
      let res = await this.dictLoad({ type })
      this[`${type}Dict`] = res[type]
    },
    handleSizeChange (val) {
      this.params.limit = val
      this.params.page = 1
      this.queryList()
    },
    handleCurrentChange (val) {
      this.params.page = val
      this.queryList()
    },
    // 详情
    onInfo({index, row}) {
      this.currId = row.id
      this.infoVisible = true
    },
    onAddSubmit() {
      this.$refs.add.submit(this.currId, (code) => {
        if (code === 0) {
          this.$message.success('操作成功')
          this.visibleAdd = false
          this.queryList()
        }
      })
    },
    // 修改
    onUpdate ({ index, row }) {
      this.currRow = row
      this.currId = row.id
      this.visibleAdd = true
      this.dialogTitle = '修改企业'
    },
    // 删除
    onDelete ({ index, row }) {
      this.$confirm('您确定删除吗？', '提示').then(async res => {
        let { code } = await api.PM_ENTERPRISE_DELETE([row.id])
        if (code ===0) {
          this.$message.success('删除成功')
          this.params.page = 1
          await this.queryList()
        }
      }).catch(err => {})
    },
    // 人员采集
    onPerson ({ index, row }) {
      this.currId = row.id
      this.visiblePerson = true
    },
    onPersonSubmit() {
      this.$refs.person.submit((code) => {
        if (code === 0) {
          this.$message.success('操作成功')
          this.visiblePerson = false
          this.queryList()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  .page-form {
    border: 1px solid #eee;
    padding: 20px 20px 0;
  }
  .page-table {
    border: 1px solid #eee;
    padding: 20px;
    margin-top: 20px;
    ::v-deep .el-image__error {
      font-size: 12px;
    }
  }
}
</style>
